<!--  -->
<template>
  <el-button :disabled="disabled" @click="handleSend" :round="round">{{ text }}</el-button>
</template>

<script setup>
import { ElMessage } from "element-plus";
import api from "@/api";
const props = defineProps({
  type: {
    type: String,
    default: "email",
  },
  params: {
    type: Object,
    default: () => {},
  },
  elRef: "",
  round: {
    type: Boolean,
    default: true,
  },
});

const disabled = ref(false);
const text = ref("发送验证码");

const handleSend = () => {
  props.elRef.validateField(["phone"], (valid) => {
    if (valid) {
      api.post("/smsCodeLog/send", props.params, { msg: true }).then((res) => {
        afterSend();
      });
      return;
    }
  });
};
const afterSend = () => {
  if (disabled.value) return;
  disabled.value = true;
  let n = 60;
  text.value = `剩余 ${n} s`;
  const run = setInterval(() => {
    n = n - 1;
    text.value = `剩余 ${n} s`;

    if (n < 0) {
      clearInterval(run);
      disabled.value = false;
      text.value = "重新发送";
    }
  }, 1000);
};
</script>
<style lang="scss" scoped></style>
